<template>
  <div>
    <!-- todo 头部 -->
    <header class="wrap">
      <div class="form">
        <div class="search">
          <input type="text" placeholder="请输入书名或作者名" @keyup="search" />
          <div class="logo icon-sousuo iconfont"></div>
        </div>
      </div>

      <a class="back" @click="$router.back()">取消</a>
    </header>
    <!-- todo 头部 -->

    <!-- todo 热门搜索 -->
    <div class="hot_search wrap" v-if="!searchList && hotSearch && !loading">
      <div class="title">
        <h3>热门搜索</h3>
      </div>
      <ul class="content clearfix">
        <router-link
          tag="li"
          :to="'/details?id=' + vl.id"
          v-for="vl in hotSearch"
          :key="vl.id"
        >
          {{ vl.name }}
        </router-link>
      </ul>
      <div class="line"></div>
    </div>
    <!-- todo 热门搜索 -->

    <!-- todo 搜索历史 -->
    <div
      class="history wrap"
      v-if="!searchList && history_search.length && !loading"
    >
      <div class="title">
        <h3>搜索历史</h3>
        <div class="btn" @click="clear_hs">清空</div>
      </div>
      <ul class="content clearfix">
        <li v-for="(vl, i) in history_search" :key="i" @click="c_search">
          {{ vl }}
        </li>
      </ul>
    </div>
    <!-- todo 搜索历史 -->

    <!-- 搜索列表 -->
    <search-list
      v-if="searchList && !loading"
      :search-list="searchList"
    ></search-list>
    <!-- 搜索列表 -->

    <!-- 加载框 -->
    <div class="loadingBox" v-show="loading">
      <van-loading text-color="#000" color="#000" size="24px" vertical>
        搜索中...
      </van-loading>
    </div>
    <!-- 加载框 -->
  </div>
</template>

<script>
import { getHotSearch, getSearchtData } from "../api/search";
import searchList from "../components/searchList.vue";
export default {
  data() {
    return {
      hotSearch: null, //热门搜索列表
      keyword: null, //搜索关键词
      searchList: null, //搜索列表
      userInfo: null, // 用户数据
      history_search: null, //搜索历史
      loading: false,
    };
  },
  methods: {
    // 获取热门搜索
    getHotSearchFun() {
      getHotSearch().then((data) => {
        this.hotSearch = data.list;
      });
    },
    // 获取搜索数据
    getSearchtDataFun() {
      getSearchtData({ keyword: this.keyword }).then((data) => {
        console.log(data.data);
        this.searchList = data.data.books;
        this.loading = false;
      });
    },
    // 获取用户数据
    getUserDataFun() {
      let userId = localStorage.getItem("userId");
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));

      this.history_search = this.userInfo[userId].history_search;
    },
    // 搜索功能
    search(e) {
      let name = e.target.value;

      if (e.keyCode == 13 && name) {
        this.keyword = name;
        this.loading = true;

        let userId = localStorage.getItem("userId");
        this.userInfo[userId].history_search.push(name);
        this.history_search = this.userInfo[userId].history_search;
        localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
      } else if (!name) {
        this.searchList = null;
      }
    },
    // 点击关键词跳转
    c_search(e) {
      let name = e.target.innerText;
      if (name) {
        this.keyword = name;
      }
    },
    // 清除搜索
    clear_hs() {
      let userId = localStorage.getItem("userId");
      this.userInfo[userId].history_search = [];
      this.history_search = [];
      localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
    },
  },
  created() {
    this.getHotSearchFun();
    this.getUserDataFun();
  },
  watch: {
    keyword: function () {
      this.getSearchtDataFun();
    },
  },
  components: {
    searchList,
  },
};
</script>

<style lang="scss" scoped>
header {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  // height: 54px;
  padding: 8px 16px;

  > .form {
    flex: 1;

    > .search {
      height: 31px;
      background: #f5f5f5;
      border-radius: 5px;
      display: flex;
      align-items: center;
      color: #999;
      position: relative;

      > input {
        background: transparent;
        position: absolute;
        height: 100%;
        width: 100%;
        border: 0;
        font-size: 14px;
        box-sizing: border-box;
        padding-left: 30px;
      }

      > .logo {
        font-size: 18px;
        margin-left: 8px;
      }

      > .text {
        font-size: 14px;
        margin-left: 4px;
      }
    }
  }

  > .back {
    font-size: 16px;
    color: #23b383;
    font-weight: bold;
    margin-left: 16px;
  }
}

.history,
.hot_search {
  position: relative;
  padding: 30px 16px 8px;
  overflow: hidden;

  > .title {
    display: flex;
    padding-bottom: 16px;
    justify-content: space-between;
    align-items: center;

    > h3 {
      color: #333;
      font-size: 18px;
      font-weight: bold;
    }

    > .btn {
      color: #23b383;
      font-weight: bold;
      font-size: 16px;
    }
  }

  > .content {
    > li {
      color: #333;
      background: #f5f5f5;
      border-radius: 4px;
      float: left;
      font-size: 14px;
      line-height: 14px;
      padding: 6px 12px;
      margin-right: 12px;
      margin-bottom: 12px;
    }
  }

  > .line {
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 100%;
    background-color: #e5e5e5;
    transform: scaleY(0.5);
  }
}
</style>